<template>
	<el-row class="container">
		<!-- 头部导航 -->
		<el-col :span="24" class="header">
			<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
				{{collapsed?'':sysName }}
			</el-col>
			<el-col :span="10">
				<div class="tools" @click.prevent="collapse">
					<i class="fa fa-align-justify"></i>
				</div>
			</el-col>
			<el-col :span="4" class="userinfo">
				<el-dropdown trigger="hover">
					<span class="el-dropdown-link userinfo-inner">
			          <img :src="this.sysUserAvatar" /> {{sysUserName}}
			          </span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>设置</el-dropdown-item>
						<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
		</el-col>
		<el-col :span="24" class="main">
			<!-- 左侧菜单 -->
			<Sidebar></Sidebar>
			<!-- 右侧内容 -->
			<section class="content-container">
				<div class="grid-content bg-purple-light">
					<!-- 子导航 -->
					<el-col :span="24" class="breadcrumb-container">
						<strong class="title">{{$route.name}}</strong>
						<el-breadcrumb separator="/" class="breadcrumb-inner">
							<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
								{{ item.name }}
							</el-breadcrumb-item>
						</el-breadcrumb>
					</el-col>
					<!-- 内容 -->
					<el-col :span="24" class="content-wrapper">
						<transition name="fade" mode="out-in">
							<router-view></router-view>
						</transition>
					</el-col>
				</div>
			</section>
		</el-col>
		<el-col :span="24" class="dialogs">
			<ErrorNotify></ErrorNotify>
		</el-col>
	</el-row>
</template>
<script>
import Sidebar from './Sidebar.vue'
import ErrorNotify from 'src/components/ErrorNotify.vue'

export default {
	name: 'home',
	data() {
		return {
			sysName: 'Superd后台管理',
			sysEnv: '',
			collapsed: false,
			sysUserName: null,
			sysUserAvatar: null
		}
	},
	computed: {

	},
	components: {
		Sidebar,
		ErrorNotify
	},
	methods: {
		//折叠导航栏
		collapse: function() {
			let state = !this.collapsed
			this.$store.dispatch('local', { field: 'collapsed', val: state });
			this.collapsed = state;
		},
		changeTitle(vm) {
			if (vm.pageTitle) {
				document.title = `${vm.pageTitle}`;
			}
		},
		logout: function() {
			this.$confirm('确认退出吗?', '提示', {
				//type: 'warning'
			}).then(() => {
				localStorage.removeItem('user');
				this.$router.push('/login');
			});
		}
	},
	mounted() {
		let user = JSON.parse(localStorage.getItem('user'));
		this.sysUserName = user.username;
	}
}

</script>
<style scoped lang="scss">
@import '~scss_vars';

.container {
	position: absolute;
	top: 0px;
	bottom: 0px;
	width: 100%;
	.header {
		height: 60px;
		line-height: 60px;
		background: $color-primary;
		color: #fff;
		.userinfo {
			text-align: right;
			padding-right: 35px;
			float: right;
			.userinfo-inner {
				cursor: pointer;
				color: #fff;
				img {
					width: 40px;
					height: 40px;
					border-radius: 20px;
					margin: 10px 0px 10px 10px;
					float: right;
				}
			}
		}
		.logo {
			//width:230px;
			height: 60px;
			font-size: 22px;
			padding-left: 20px;
			padding-right: 20px;
			border-color: rgba(238, 241, 146, 0.3);
			border-right-width: 1px;
			border-right-style: solid;
			img {
				width: 40px;
				float: left;
				margin: 10px 10px 10px 18px;
			}
			.txt {
				color: #fff;
			}
		}
		.logo-width {
			width: 230px;
		}
		.logo-collapse-width {
			width: 60px
		}
		.tools {
			padding: 0px 23px;
			width: 14px;
			height: 60px;
			line-height: 60px;
			cursor: pointer;
		}
	}
	.main {
		display: flex; // background: #324057;
		position: absolute;
		top: 60px;
		bottom: 0px;
		overflow: hidden;

		.content-container {
			// background: #f1f2f7;
			flex: 1; // position: absolute;
			// right: 0px;
			// top: 0px;
			// bottom: 0px;
			// left: 230px;
			overflow-y: scroll;
			padding: 20px;
			.breadcrumb-container {
				//margin-bottom: 15px;
				.title {
					width: 200px;
					float: left;
					color: #475669;
				}
				.breadcrumb-inner {
					float: right;
				}
			}
			.content-wrapper {
				background-color: #fff;
				box-sizing: border-box;
			}
		}
	}
}

</style>
